<template>
	<view>
		<u-toast ref="uToast" />
		<view class="money">
			<view class="money-banner">
				<text>转账金额</text>
			</view>
			<view class="money-column">
				<view class="left-icon">
					<u-icon name="/static/rmb.png" size="40" color="#303133"></u-icon>
				</view>
				<view class="right-input">
					<input class="aaa" placeholder="0.00" type="digit" placeholder-class="bbb" v-model="input_money"/>
				</view>
			</view>
		</view>
		
		<view class="drivider">
			<u-divider lineColor="#82848a"></u-divider>
		</view>
		
		<view class="date-input">
			<view class="left-text">
				<text>转出账户:</text>
			</view>
			<view class="right-textarea">
				<picker mode="selector"  :range="account_list" :value="outflowAccount" @change="getOutAccount" style="font-size: 30rpx;">
					<view>
						<text style="font-size: 40rpx; color: #606266;">{{outflowAccount}}</text>
					</view>
				</picker>
			</view>
		</view>
		
		<view class="date-input">
			<view class="left-text">
				<text>转入账户:</text>
			</view>
			<view class="right-textarea">
				<picker mode="selector"  :range="account_list" :value="inflowAccount" @change="getInAccount" style="font-size: 30rpx;">
					<view>
						<text style="font-size: 40rpx; color: #606266;">{{inflowAccount}}</text>
					</view>
				</picker>
			</view>
		</view>
		
		<view class="date-input">
			<view class="left-text">
				<text>日期:</text>
			</view>
			<view class="right-textarea">
				<picker mode="date" fields="day" :value="date" @change="bindDateChange" style="font-size: 30rpx;">
					<view>
						<text style="font-size: 40rpx; color: #606266;">{{date}}</text>
					</view>
				</picker>
			</view>
		</view>
		
		<view class="date-input">
			<view class="left-text">
				<text>备注:</text>
			</view>
			<view class="right-textarea">
				<input class="textarea" placeholder="备注" type="text" v-model="remarks" maxlength="20"/>
			</view>
		</view>
		
		<view class="button">
			<view class="submit-button">
				<u-button type="primary" icon="edit-pen" text="保存" @click="saveTransfer()"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				input_money: '',
				date: this.getCurrentMonth(),
				outflowAccount: "请选择",
				inflowAccount: "请选择",
				remarks: "",
				account_list: [],
			}
		},
		onLoad() {
			this.getUserAccount()
		},
		methods: {
			bindDateChange: function(e) {
			    this.date = e.target.value
			},
			getCurrentMonth () {
				const date = new Date()
			    let year = date.getFullYear()
			    let month = date.getMonth() + 1
				month = month > 9 ? month : '0' + month
				let day = date.getDate();
				day = day > 9 ? day : '0' + day
				return `${year}-${month}-${day}`
			},
			getOutAccount: function(e) {
				this.outflowAccount = this.account_list[e.target.value]
			},
			getInAccount: function(e) {
				this.inflowAccount = this.account_list[e.target.value]
			},
			getUserAccount (){
				let userId = uni.getStorageSync('userId')
				let params = {
					"userId": userId
				}
				const _this = this
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						  'token': uni.getStorageSync('token')
					},
					url: this.$USER_AVATOR_URL.USER_AVATOR_URL+"/account/useraccount",
					method: 'POST',
					data: params,
					success(res) {
						_this.account_list = res.data.data
					}
				})
			},
			saveTransfer (){
				if (this.input_money == null || this.input_money == 0){
					this.$refs.uToast.show({
						type: 'error',
						title: '金额有误',
						message: "输入金额有误",
					})
					return
				}else if(this.outflowAccount == "请选择" || this.inflowAccount == "请选择"){
					this.$refs.uToast.show({
						type: 'error',
						title: '选择有误',
						message: "请选择转入/转出账户",
					})
					return
				}else if(this.outflowAccount == this.inflowAccount){
					this.$refs.uToast.show({
						type: 'error',
						title: '选择有误',
						message: "转入和转出账户不能是同一个",
					})
					return
				}
				let userId = uni.getStorageSync('userId')
				const date = new Date()
				let h = date.getHours()
				let m = date.getMinutes()
				let s = date.getSeconds()
				let accountTime = `${h}:${m}:${s}`
				let params = {
					"userId": userId,
					"money": this.input_money,
					"fromName": this.outflowAccount,
					"toName": this.inflowAccount,
					"transferDate": this.date,
					"transferTime": accountTime,
					"remarks": this.remarks
				}
				const _this = this
				uni.request({
					header: {
						  'Content-Type': 'application/json',
						  'token': uni.getStorageSync('token')
					   }, 
					url: this.$USER_AVATOR_URL.USER_AVATOR_URL+"/transfer/addtransfer",
					method: 'POST',
					data: params,
					success(res) {
						
						if(res.data.code == 200){
							_this.$refs.uToast.show({
								type: 'success',
								title: '添加成功',
								message: res.data.errorMessage,
								duration: 700,
								complete() {
									uni.switchTab({
										url: '/pages/account/account',
										success: (res) => {
											let page = getCurrentPages().pop();
											if (page == undefined || page == null) return;
											page.onLoad();
										}
										
									})
								},
							})
						} else {
							_this.$refs.uToast.show({
								type: 'error',
								title: '添加失败',
								message: res.data.errorMessage,
								duration: 1000
							})
						}
						

					}
				})
			}
		}
	}
</script>

<style>
	
	.money {
		margin-top: 100rpx;
		margin-left: 30rpx;
	}
	.money-banner {
		font-size: 40rpx;
		color: #82848a;
	}
	.money-column {
		display: flex;
		flex-wrap: wrap;
		margin-top: 40rpx;
	}
	.left-icon{
		width: 100rpx;
	}
	.right-input{
		width: 550rpx;
		height: 90rpx;
	}
	.aaa{
		height: 80rpx; 
		min-height: 60rpx;
		font-size: 80rpx;
	}
	.bbb{
		height: 80rpx;
		min-height: 60rpx;
		font-size: 80rpx;
	}
	
	.drivider{
		height: 20rpx;
		background-color: #c8c9cc;
	}
	
	.date-input{
		display: flex;
		flex-wrap: wrap;
		margin-top: 40rpx;
		margin-left: 30rpx;
	}
	.left-text{
		width: 200rpx;
		font-size: 40rpx;
		color: #303133;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-right: 30rpx;
	}
	.right-textarea{
		width: 450rpx;
		font-size: 40rpx;
		display: flex;
		align-items: center;
	}
	
	.button{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 100rpx;
	}
	.submit-button{
		width: 400rpx;
		height: 100rpx;
		font-size: 40rpx;
	}
</style>
